<template>
	<page-meta>
		<navigation-bar :title="title" title-align="center" background-color="#F1F3F9" front-color="#000000" />
	</page-meta>
	<view class="device-group-add-wrap">
		<view class="main-wrap">
			<view class="form-wrap">
				<u--form :model="form" :rules="rules" ref="form" labelWidth="55" labelAlign="center">
					<u-form-item :label="$tt('group.name')" prop="groupName" borderBottom>
						<u--input v-model="form.groupName" :placeholder="$tt('group.inputName')" :clearable="true"
							border="none"></u--input>
					</u-form-item>
					<u-form-item :label="$tt('group.sort')" prop="groupOrder" borderBottom>
						<u--input v-model="form.groupOrder" type="number" :placeholder="$tt('group.inputSort')"
							:clearable="true" border="none"></u--input>
					</u-form-item>
					<u-form-item :label="$tt('group.remark')" prop="remark">
						<u--input v-model="form.remark" :placeholder="$tt('group.content')" :clearable="true"
							border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>

			<view class="footer">
				<u-button type="primary" :plain="true" @tap="handleSubmitForm"
					customStyle="border: none; border-radius: 5px; padding: 50rpx 0;">{{$tt('common.save')}}</u-button>
				<u-button v-if="isUpdate" type="error" :plain="true" @tap="handleDelete()"
					customStyle="border: none; border-radius: 5px; padding: 50rpx 0; margin-top: 10px;">{{$tt('common.delete')}}</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getGroup, delGroup, updateGroup, addGroup } from '@/apis/modules/group';

	export default {
		data() {
			return {
				title: this.$tt('group.add'),
				isUpdate: false,
				// 表单参数
				form: {
					groupName: null,
					groupOrder: 0,
					remark: null
				},
				// 表单校验
				rules: {
					'groupName': {
						type: 'string',
						required: true,
						message: this.$tt('group.groupName'),
						trigger: ['blur', 'change']
					},
					'groupOrder': {
						type: 'number',
						required: true,
						message: this.$tt('group.serialNumber'),
						trigger: ['blur', 'change']
					},
				}
			};
		},
		onLoad(option) {
			if (option.groupId) {
				this.form.groupId = option.groupId;
				this.getInfo();
				this.title = this.$tt('group.updateGroup');
				this.isUpdate = true;
			}
		},
		methods: {
			getInfo() {
				getGroup(this.form.groupId).then(response => {
					this.form = response.data;
				});
			},
			// 提交数据
			handleSubmitForm() {
				this.$refs.form.validate().then(res => {
					uni.showLoading({
						title: this.$tt('group.submit')
					});
					if (this.form.groupId != null) {
						updateGroup(this.form).then(response => {
							uni.showToast({
								icon: 'success',
								title: this.$tt('common.updateSuccessful')
							});
							uni.$emit('re-device-group-list', true); // 刷新触发
							uni.navigateBack({ delta: 1 });
						}).finally(() => {
							uni.hideLoading();
						});
					} else {
						addGroup(this.form).then(response => {
							uni.showToast({
								icon: 'success',
								title: this.$tt('common.addSuccessful')
							});
							uni.$emit('re-device-group-list', true); // 刷新触发
							uni.navigateBack({ delta: 1 });
						}).finally(() => {
							uni.hideLoading();
						});
					}
				});
			},
			// 删除
			handleDelete() {
				uni.showModal({
					title: this.$tt('group.system'),
					content: this.$tt('group.delete'),
					confirmText: this.$tt('group.confirm'),
					cancelText: this.$tt('group.cancel'),
					success: result => {
						if (result.confirm) {
							uni.showLoading({
								title: this.$tt('group.deleting')
							});
							delGroup(this.form.groupId).then(res => {
								if (res) {
									uni.showToast({
										icon: 'success',
										title: res.msg
									});
									uni.$emit('re-device-group-list', true); // 刷新触发
									uni.navigateBack({ delta: 1 });
								}
							}).finally(() => {
								uni.hideLoading();
							});
						}
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: $uni-bg-color-grey;
	}
</style>
<style lang="scss" scoped>
	.device-group-add-wrap {
		width: 100%;

		.main-wrap {
			padding: 14rpx 30rpx;

			.form-wrap {
				padding: 10rpx 24rpx;
				background: #FFFFFF;
				border-radius: 10rpx;

				::v-deep .u-form-item__body {
					padding: 26rpx 0;
				}
			}

			.footer {
				margin-top: 30rpx;
			}
		}
	}
</style>